@use '../../../styles/mixins';

.showcase {
    display: flex;
    flex-direction: column;

    & + & {
        margin-block-start: var(--g-spacing-9);
    }

    &__title {
        @include mixins.text-display-2();
    }

    &__description {
        @include mixins.text-body-2();
        margin-block-start: var(--g-spacing-2);
        color: var(--g-color-text-secondary);
    }

    &__content {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        gap: var(--g-spacing-6);

        &:not(:only-child) {
            margin-block-start: var(--g-spacing-5);
        }
    }

    &_direction_column &__content {
        flex-direction: column;
        align-items: flex-start;
    }
}
